//全部支付
import { CommonModal } from "@/pages/OrderModule/common/components/CommonModal";
import SubTitle from "@/pages/OrderModule/common/components/SubTitle";
import CommonInput from "@/pages/OrderModule/common/components/CommonInput";
import CommonLoading from "@/components/CommonLoading";
import PaymentStatisticsModal from "./PaymentStatisticsModal";
import { useState, useEffect } from "react";
import { allPayView, allPay, getOrderIdsOp } from "../../../../services";
import { Alert, Form, Typography, Row, Col, Button } from "antd";

const AllPayModal = ({ item = {}, handleOk, handleCancel }) => {
	const { searchForm } = item;
	const [payData, setPayData] = useState({}); //全部支付预览
	const [orderIds, setOrderIds] = useState([]); //全部支付需要轻请求的订单ids
	const [visible, setVisible] = useState(false); //温馨提示
	const [loading, setLoading] = useState(false);

	const [form] = Form.useForm();

	const { availBalance, orderTotalPrice, payMenTotalPrice, balanceTotalPrice } = payData;

	useEffect(() => {
		getOrderIds();
	}, []);

	useEffect(() => {
		if (orderIds.length) {
			getAllPayView();
		}
	}, [orderIds]);

	//获取全部订单id
	const getOrderIds = async () => {
		setLoading(true);
		const { success, data = {} } = await getOrderIdsOp(searchForm);
		const { orderList = [] } = data;
		if (success) {
			setOrderIds(orderList);
		}
		setLoading(false);
	};

	//获取全部支付预览
	const getAllPayView = async () => {
		setLoading(true);
		const { success, data = {} } = await allPayView({
			orderIds: orderIds
		});
		if (success) {
			setPayData(data);
		}
		setLoading(false);
	};

	//点击全部支付
	const handleAllPay = async val => {
		setLoading(true);
		const { success, data = {} } = await allPay({
			orderIds: orderIds,
			password: val.password
		});
		if (success) {
			setVisible("paymentStatistics");
		}
		setLoading(false);
	};

	const onOk = () => {
		form
			.validateFields()
			.then(val => {
				handleAllPay(val);
			})
			.catch(err => {});
	};

	//剩余支付中订单统计
	const PaymentStatisticsModalProps = {
		handleCancel(paymentStatistics) {
			setVisible(false);
			handleOk(2, "", paymentStatistics);
		}
	};

	return (
		<CommonModal
			footer={
				<div style={{ display: "flex" }}>
					<div style={{ flex: 1, textAlign: "left" }}>
						账户余额：<span className="common-color9">¥ {availBalance}</span>
					</div>
					<Button key="save" onClick={handleCancel}>
						取消
					</Button>
					<Button key="ok" onClick={onOk} type="primary">
						确定
					</Button>
				</div>
			}
			title={{ title: "全部支付确认信息" }}
			open={true}
			width="530px"
			onOk={handleOk}
			onCancel={handleCancel}
		>
			<Alert
				showIcon
				message={<Typography as="s1">全部支付是对当前页面筛选出来的全部订单发起支付请求，请确认是否支付？</Typography>}
			/>
			<SubTitle symbol as="s2" title="金额明细" wrapStyle={{ marginBottom: 16, marginTop: 16 }} />
			<Row style={{ marginTop: 16, color: "#333" }} gutter={40}>
				<Col>
					<div>订单总额：¥ {orderTotalPrice}</div>
				</Col>
				<Col>
					<div>
						账期应付：<span className="common-color9">¥ {payMenTotalPrice}</span>
					</div>
				</Col>
				<Col>
					<div>
						余额应付：¥ <span className="common-color9">{balanceTotalPrice}</span>
					</div>
				</Col>
			</Row>
			<Row style={{ margin: "16px 16px 16px 16px" }}>
				<Col span={24}>
					<Form form={form}>
						<Form.Item name="password" rules={[{ required: true, message: "请输入支付密码" }]}>
							<CommonInput type="password" placeholder="请输入支付密码" aria-required />
						</Form.Item>
					</Form>
				</Col>
			</Row>
			{visible == "paymentStatistics" && <PaymentStatisticsModal {...PaymentStatisticsModalProps} />}
			<CommonLoading loading={loading} />
		</CommonModal>
	);
};

export default AllPayModal;
